<template>
  <div id="nav">
    <router-view/>
  </div>
</template>

<script>
  import {requestProductTypeData,requestHomeComShow,requestAllComMsg,requestServiceMsg} from "./network/home";
  import {mapActions,mapGetters} from "vuex"

  export default {
    name: "App",
    components: {},
    computed: {
      ...mapGetters({
        refreshTopNavSessionStorageData: "topNav/refreshTopNavSessionStorageData",
        refreshPreShowSessionStorageData: "PreShow/refreshPreShowSessionStorageData",
        refreshDetailDataSessionStorageData: "DetailData/refreshDetailDataSessionStorageData",
        refreshServiceMsgSessionStorageData: "ServiceMsg/refreshServiceMsgSessionStorageData"
      })
    },
    methods: {
      ...mapActions({
        loadData: "topNav/loadData",
        addDataBySessionStorage: "topNav/addDataBySessionStorage",
        loadDataForProShow: "PreShow/loadDataForProShow",
        loadDataForDetailData: "DetailData/loadDataForDetailData",
        addDataForDetailDataBySessionStorage: "DetailData/addDataForDetailDataBySessionStorage",
        loadDataForServiceMsg: "ServiceMsg/loadDataForServiceMsg",
        addDataForServiceMsgBySessionStorage: "ServiceMsg/addDataForServiceMsgBySessionStorage"
      })
    },
    created() {
      //在构建项目的时候请求数据
      //判断用户信息是否存在
      if (sessionStorage.getItem("userMsg")){
        this.$store.state.UserMsg.UserMsg = Object.assign(this.$store.state.UserMsg.UserMsg,JSON.parse(sessionStorage.getItem("userMsg")));
      }

      //这是首页头部数据的一个数据request及其应对策略
      if (sessionStorage.getItem("TopNav")){
        //将sessionStorage中的数据赋值给vuex
        this.addDataBySessionStorage();
      }else {//如果sessionStorage中没有数据，就reqest后台
        //请求ProductType部分数据
        requestProductTypeData()
          .then(data => {
            //调用方法，将数据替换到store
            this.loadData(data.data)
            return Promise.resolve(true);
          }).then(data =>{
          //调用刷新数据的方法
          this.refreshTopNavSessionStorageData;
        }).catch(data => {
          this.$message.error("系统发送故障！")
        });
      }

      //这是首页商品展示数据的一个数据request及其应对策略
      if (sessionStorage.getItem("PreShow")){//判断该数据是否已经在session当中存在
        //将sessionStorage中的数据赋值给vuex
        this.loadDataForProShow([...JSON.parse(sessionStorage.getItem("PreShow"))])
      }else {
        //向后台请求数据
        requestHomeComShow()
          .then(data => {
            //调用方法将数据替换到store中
            this.loadDataForProShow(data.data);
            return Promise.resolve(true);
          }).then(data => {
          //调用刷新session数据的方法
          this.refreshPreShowSessionStorageData;
        }).catch(data =>{
          console.log(data);
        })
      }

      //这是所有商品数据的一个数据request及其应对策略
      if (sessionStorage.getItem("DetailData")){//判断该数据是否已经在session当中存在
        //将sessionStorage中的数据赋值给vuex
        this.addDataForDetailDataBySessionStorage();
      }else {
        //向后台请求数据
        requestAllComMsg()
          .then(data => {
            //调用方法将数据替换到store中
            this.loadDataForDetailData(data.data);
            return Promise.resolve(true);
          }).then(data => {
          //调用刷新session数据的方法
          this.refreshDetailDataSessionStorageData;
        }).catch(data =>{
          console.log(data);
        })
      }

      //保修服务 ServiceMsg.js
      if (sessionStorage.getItem("ServiceMsg")){//判断该数据是否已经在session当中存在
        //将sessionStorage中的数据赋值给vuex
        this.addDataForServiceMsgBySessionStorage();
      }else {
        //向后台请求数据
        requestServiceMsg()
          .then(data => {
            //调用方法将数据替换到store中
            this.loadDataForServiceMsg(data.data);
            return Promise.resolve(true);
          }).then(data => {
          //调用刷新session数据的方法
          this.refreshServiceMsgSessionStorageData;
        }).catch(data =>{
          console.log(data);
        })
      }

    }
  }
</script>

<style>
  @import "assets/css/main.css";
  @import '../node_modules/element-plus/lib/theme-chalk/index.css';
</style>
